<!--
 * @Description: 
 * @Autor: 蔡英兰
 * @Date: 2023-05-04 16:39:02
 * @LastEditors: 蔡英兰
 * @LastEditTime: 2023-05-11 15:38:12
-->
<template>
  <el-drawer
    class="my-drawer"
    ref="drawer"
    :visible.sync="visible"
    :direction="direction"
    :show-close="false"
    :size="size"
    :wrapperClosable="false"
    custom-class="drawerWrap"
    destroy-on-close
    @close="$emit('closeDrawer')"
  >
    <div class="drawer_header">
      <span>{{ drawTitle }}</span>
      <img src="./img/gb_ic.png" alt="" @click="closed" />
    </div>
    <slot></slot>
  </el-drawer>
</template>

<script>
export default {
  props: {
    drawTitle: {
      type: String,
      default: "新增信息",
    },
    size: {
      type: String,
      default: "55%",
    },
  },
  data() {
    return {
      visible: false,
      direction: "rtl",
    };
  },
  methods: {
    open() {
      this.visible = true;
    },
    closed() {
      this.visible = false;
      this.$emit("closeDrawer");
    },
  },
};
</script>

<style lang="scss">
.my-drawer {
  ::v-deep .el-drawer__body {
    height: 0;
  }
  .drawer_header {
    // border-bottom: 1px solid #d8d8d8;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    font-family: PingFang SC-Bold, PingFang SC;
    // font-weight: 400;
    font-weight: bold;
    color: #1c2438;
    line-height: 22px;
    -webkit-background-clip: text;
    img {
      cursor: pointer;
    }
  }
  .el-drawer__header {
    margin-bottom: 0 !important;
    padding: 0 !important;
  }
}
</style>